<template>
    <div>
        <div class="navbar-banner layout" style="margin-top:50px">
            <div class="bindCourse">

                <form action="/bindCourse" method="post">
                    <div class="form-group course">
                        <i>请绑定课程信息</i>
                        <div class="input-group">
                            <ul>
                                <li>
                                    <span>机构</span>
                                    <span>成都易腾创想智慧科技有限公司</span>
                                </li>
                                <li>
                                    <span>课程</span>
                                    <span>
                                        <select v-model="courseName" @change="getTerm()">
                                            <option selected hidden disabled value="">请选择</option>
                                            <option v-for="(course,index) in courseList" :key="index">
                                                {{course.name}}
                                            </option>
                                        </select>
                                        <i class="fa" style="font-size:15px">&#xf105</i>
                                    </span>
                                </li>
                                <li>
                                    <span>开课时间</span>
                                    <span>
                                        <input v-model="startCourserTime" type="date" placeholder="请选择开课时间" />
                                    </span>
                                </li>
                                <li>
                                    <span>课程时长</span>
                                    <span>{{term}}</span>
                                </li>
                            </ul>


                        </div>
                    </div>

                    <div class="form-group course">
                        <i>请填写付费信息</i>
                        <div class="input-group">
                            <ul>
                                <li>
                                    <span>支付方案</span>
                                    <span>
                                        <select>
                                            <option value="1">6+12A</option>
                                            <option value="2">6+12B</option>
                                            <option value="3">6+12C</option>
                                        </select>
                                        <i class="fa" style="font-size:15px">&#xf105</i>
                                    </span>
                                </li>
                                <li>
                                    <span><strong>支付金额</strong></span>
                                    <span><strong>21980</strong></span>
                                </li>
                                <li>
                                    <span>支付计划</span>
                                    <span>课程时长</span>
                                </li>
                                <li>
                                    <span>第三方技术服务费（元）</span>
                                    <span>1099.00</span>
                                </li>
                            </ul>


                        </div>
                    </div>

                    <div class="form-group course">
                        <i>请填写个人信息</i>
                        <div class="input-group">
                            <ul>
                                <li>
                                    <span>邮箱</span>
                                    <span><input type="email" placeholder="请输入邮箱" float="right"></input></span>
                                </li>
                                <li>
                                    <span>居住城市</span>
                                    <span class="city">
                                        <v-distpicker @selected="onSelected" address-container="mobile"></v-distpicker>
                                    </span>
                                </li>
                                <li>
                                    <span>详细地址</span>
                                    <span>
                                        <input type="text" placeholder="请务必精确到门牌号" />
                                    </span>
                                </li>
                                <li>
                                    <span>实名</span>
                                    <span data-toggle="modal" data-target="#myModalCertification"><a>去实名</i><i
                                                class="fa" style="font-size:15px">&#xf105</i> </a></span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="form-group">
                        <input data-toggle="modal" data-target="#myModeltoPay" class="btn btn-primary" name="submit"
                            value="确认绑定">
                    </div>

                </form>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModalCertification" tabindex="-1" role="dialog"
            aria-labelledby="myModalCertification">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalCertification" style="text-align: center;">剩余待支付详情</h4>
                    </div>

                    <div class="modal-body">
                        <div class="topPicture">
                            <img src="./img/exmpCer.jpg" style="width:200px; height: 200px;">
                            <div style="margin:auto;">
                                <ul>
                                    <li>
                                        <h4><span class="glyphicon glyphicon-exclamation-sign"></span>四角完整</h4>
                                    </li>
                                    <li>
                                        <h4><span class="glyphicon glyphicon-exclamation-sign"></span>亮度均匀</h4>
                                    </li>
                                    <li>
                                        <h4><span class="glyphicon glyphicon-exclamation-sign"></span>照片清晰</h4>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="bottomPicture">
                            <ul>
                                <li>
                                    <img src="./img/lack.png">
                                    <h4>缺边</h4>

                                </li>
                                <li>
                                    <img src="./img/tooLight.png">
                                    <h4>曝光</h4>
                                </li>
                                <li>
                                    <img src="./img/blur.png">
                                    <h4>模糊</h4>
                                </li>
                            </ul>

                        </div>
                    </div>

                    <div class="modal-footer" style="text-align:center; ">
                        <button @click="toCertification" type="button" class="btn btn-default btn-primary"
                            data-dismiss="modal"> 知道了 </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModeltoPay" tabindex="-1" role="dialog" aria-labelledby="myModeltoPay">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        绑定成功！
                    </div>

                    <div class="modal-body"></div>

                    <div class="modal-footer" style="text-align:center; ">
                        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                        <router-link to="/payDetail">
                            <button type="button" class="btn btn-primary">去选择如何支付</button>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import VDistpicker from 'v-distpicker'

import { mapState } from 'vuex'

export default {
    name: 'BindCourse',
    components: { VDistpicker },
    data() {
        return {
            selected: {
                province: "",
                city: "",
                area: ""
            },
            courseName: '',
            startCourserTime: '',
            term: '',
        }
    },
    computed: {

        ...mapState({
            courseList: function (state) {
                return state.courseList.courselist;
            }
        }),

    },

    methods: {
        onSelected(data) {
            const { province, city, area } = data;
            if (!province.code && !city.code && !city.code) return;
            this.selected.province = province.value;
            this.selected.city = city.value;
            this.selected.area = area.value;


        },
        toCertification() {
            this.$router.push({
                path: '/Certification'
            })
        },
        getTerm() {
            for (let i in this.courseList) {
                if (this.courseList[i].name == this.courseName) {
                    this.term = this.courseList[i].term;
                }
            }
        },
        toPay() {
            this.$router.push('/payDetail')
        }
    }

}
</script>

<style scoped>
* {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
}

.modal {
    text-align: center;
}

.modal-header {
    font-size: 20px;
    font-weight: bolder;
    margin: 20px auto;
}

.modal-body img {
    width: 150px;
    height: 100px;

}

.topPicture {
    display: flex;
}

.bottomPicture ul {
    display: flex;
}

.bottomPicture ul li {
    border: 2px solid white;
    text-align: center;
    color: #2e7ba7;
}

select {
    border: none;
    outline: none;
    appearance: none;
    text-align: right;
}

input {
    text-align: right;
    border: none;
    outline: none;
    width: 100%;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    line-height: 50px;
}

.btn-primary {
    border-radius: 20px;
    background-color: #2e7ba7;
    background: linear-gradient(to right, #2e7ba7, #2e7ba7);
    border: none;
    text-align: center;
    font-size: 20px;
}

.bindCourse {
    background-color: #dddcdc;
    margin: auto;
}

.course {
    margin: 20px;
}

.course>i {
    font: italic bold 13px/20px arial, sans-serif;
    font-style: normal;
}

.course .input-group {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.course .input-group ul li {
    width: 100%;
    border: 1px solid #f3f2f2;
    height: 30px;
}
</style>